JavaScript 基础

发表于 | 分类于 | | 阅读数
字数统计: 2.2k | 阅读时长 ≈ 9

JavaScript语言介绍

概念

  • 浏览器脚本语言，书写在script标签中
    • 脚本：一段功能代码块，可以嵌套在其他语言中使用，完成一些额外的功能
  • 可以编写运行在浏览器上的代码程序

  • 属于解释性、弱语言类型编程语言

    三个组成部分

  • ES语法：ECMAScript、主要版本ES5和ES6

  • DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
  • BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

    三种存在位置

    行间式：存在于行间事件中

    1
    2
    3
    4
    5
    <div onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'orange'">Hello world!</div>

    i）	行间式代码块书写在一个个全局时间名属性中
    ii）	在某一个标签的某一个事件属性值中，出现的this代表该标签
    iii）该标签对象this可以访问该标签的任意全局属性(style)，然后再间接访问具体需要操作的对象(style.color)

内联式：存在于页面script标签中

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id="test">Hello world!</div>
</body>
<script>
    test.style.color = "pink";
</script>
i）可以通过标签的id(唯一标识)，在js代码块中访问到该标签(js的选择器)
ii）js代码块中语法采用的是小驼峰命名法，属性的值都是用字符串形式进行赋值
iii）js属于解释性语言，所有加载顺序会影响执行结构 

----------------------------------------------
	解释性语言特性决定JS代码位置

外联式：存在于外部JS文件，通过script标签src属性链接

1
2
3
4
5
6
7
8
9
test.js文件
test.style.backgroundColor='#0ff'

index.html文件
<script src="./js/test.js"></script>

i）通过script标签的src数据链接外部js文件
ii）使用外联的script(拥有src属性)标签，会屏蔽掉标签内部的js代码块
iii）在js任意地方，均由this对象，this对象不指向任何标签时，指向的是window对象

解释性语言特性决定JS代码位置

  • 出现在head标签底部：依赖型JS库

    1
    2
    3
    4
    <head>
        <title></title>
        <script>在这里</script>
    </head>

  • 出现在body标签底部：功能型JS脚本

    1
    2
    3
    4
    5
    6
    7
    <html>
    	<body>
    	</body>
    	<script>
        在这里
    	</script>
    </html>

JS语法规范

  • 注释
1
2
3
4
// 单行注释
/* 
多行注释
*/
  • 以分号作为语句结尾（允许省略）

变量的定义

ES5定义变量

1
2
var num = 10;  // 无块级作用域变量
num = 10;  // 全局变量

ES6定义变量

1
2
let num = 10;  // 局部变量
const NUM = 10;  // 常量
1
2
// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法

四种定义变量的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
四种定义变量的方式
语法: 关键词 变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式
{
    直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

变量(标识符)的命名规范

  • 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
  • 区分大小写
  • 不能出现关键字及保留字
1
2
3
4
5
6
7
8
// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

三种弹出框

  • alert（）：普通弹出框
1
alert("普通弹出框");
  • confirm（“确认框”）：确认框
1
2
var res = confirm("你是猪吗?");
console.log(res);//查看结果
  • prompt：输入框
1
var info = prompt("请输入内容:");

四种调试方式

  • alert()
  • console.log()
  • document.write() 和页面中原来的布局在一起出现
  • 浏览器断点调试

数据类型

值类型

  • number：数字类型
1
2
3
4
5
6
7
8
9
var a = 10; //js不区分浮点什么的
// 打印a的值和a的类型
console.log(a, typeof a); // a 和 字符串的number
console.log(typeof a,a); 
// 是浏览器打印字符串的两种样式
// 字符串以黑体，或是""括起来 都是字符串

// 判断方式
console.log(typeof a == 'number');
  • string：字符串类型
1
2
3
4
var a = '10'; //单双引号都一样
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string') //返回一个布尔值
  • boolean：布尔类型
1
2
3
4
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')
  • undefined：未定义类型
1
2
3
4
5
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)

引用类型

  • function：函数类型
1
2
3
4
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')
  • object：对象类型
1
2
3
4
5
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)

具体的对象类型

  • null：空对象
1
2
3
4
5
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)
  • Array：数组对象
1
2
3
4
5
6
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
  • Date：时间对象
1
2
3
4
5
6
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
  • RegExp：正则对象
1
2
3
4
5
6
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)

4、类型转换

  • 数字|布尔 转换为 字符串
1
2
3
console.log((true + true) * 10 * false);
// boolean类型的true就是数字1, false就是数字0
// number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用
  • 布尔|字符串 转换为 数字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var a = '10'; // => 10
    a = '3.14';  // => 3.14
    a = '3.14.15';  // => NaN
    var b = true;
//字符串可以直接当数字用
var n1 = Number(a);
    console.log(n1);//NaN
    var n2 = Number(b);
    console.log(n2);//1

a = '3.14.15';
console.log(parseFloat(a));//3.14

a = '3.94.15';  
console.log(parseInt(a));//3

// 体现弱语言类型
a = '10';
var res = +a; // 没有 + 就是 string 10
console.log(typeof(res), res); // number 10

var res = a - 0 + 1; 
console.log(typeof(res), res); // number 11
  • 字符串|数字 转换为 布尔
1
2
var a = 10 or '10'
Boolean(a)// True
  • 自动转换
1
2
3
4
5 + null  // 5
"5" + null  // "5null"
"5" + 1  // "51"
"5" - 1  // 4
  • 特殊产物
1
2
3
4
// NaN: 非数字类型
// 不与任何数相等，包含自己
// NaN与NaN不相等
// 利用isNaN()进行判断

运算符

算数运算符

前提：n = 5
image-20181219183635112

赋值运算符

前提：x=5，y=5

运算符 例子 等同于 运算结果
= x=y 5
+= x+=y x=x+y 10
-= x-=y x=x-y 0
*= x*=y x=x*y 25
/= x/=y x=x/y 1
%= x%=y x=x%y 0

比较运算符

前提：x=5

运算符 描述 比较 结果
== 等于 x==”5” true
=== 绝对等于 x===”5” false
!= 不等于 x!=”5” fales
!== 不绝对等于 x!==”5” true
> 大于 x>5 false
< 小于 x<5 false
>= 大于等于 x>=5 true
<= 小于等于 x<=5 true

逻辑运算符

前提：n=5

image-20181219184741002

三目运算符

1
2
3
4
5
6
// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);

ES6语法解构赋值

  • 数组的解构赋值
1
2
3
4
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
  • 对象的解构赋值
1
2
let {key: a} = {key: 10}
// a=10
  • 字符串解构赋值
1
2
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'